<template>
    <div id="son">
      <div id="app1"></div>
      <div>
        <div v-if="imgSrc" class="img_bg_camera">
          <p>学生状态</p>
          <img :src="imgSrc" alt class="tx_img" />
        </div>
      </div>
      <el-button size="mini" type="success" @click="setImag">实时拍照</el-button>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import {setState} from "../../api/data";
export default {
  data() {
    return {
      imgSrc: "",
    }
  },
  mounted() {
    this.echartsInit1();
  },
  methods: {

    setImag(){
      let data={
        examId:this.$route.query.examId,
        uid:this.$route.query.uid,
        state:2,
        tip: ""
      };//{examId: ,uid: ,state: 2,tip: ""}这里获取试卷id，学生id，tip为空
      setState(JSON.stringify(data)).then(res=>{
        this.imgSrc=res.data.msg;
      })
    },

    handlePrompt(a, b) {
      this.centerDialogVisible = true;
      Object.assign(this.dialogData, b); //对象的拷贝   Array.from:伪数组转为真数组
    },
    backtExam() {
      this.$router.push({
        name: "mainInvigilate",
      });
    },
    echartsInit1() {
      var app = {};

      var chartDom = document.getElementById("app1");
      var myChart = echarts.init(chartDom);
      var option;

      const categories = (function () {
        let now = new Date();
        let res = [];
        let len = 10;
        while (len--) {
          res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
          now = new Date(+now - 2000);
        }
        return res;
      })();
      const categories2 = (function () {
        let res = [];
        let len = 10;
        while (len--) {
          res.push(10 - len - 1);
        }
        return res;
      })();
      const data = (function () {
        let res = [];
        let len = 10;
        while (len--) {
          res.push(Math.round(Math.random() * 50));
        }
        return res;
      })();
      const data2 = (function () {
        let res = [];
        let len = 0;
        while (len < 10) {
          res.push(+(Math.random() * 10 + 5).toFixed(1));
          len++;
        }
        return res;
      })();
      option = {
        title: {
          text: "实时监考",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#283b56",
            },
          },
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {},
          },
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: true,
            data: categories,
          },
          {
            type: "category",
            boundaryGap: true,
            data: categories2,
          },
        ],
        yAxis: [
          {
            type: "value",
            scale: true,
            name: "Price",
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
          {
            type: "value",
            scale: true,
            name: "Order",
            max: 100,
            min: 0,
            boundaryGap: [0.2, 0.2],
          },
        ],
        series: [
          {
            name: "在线人数",
            type: "bar",
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: data,
          },
          {
            name: "掉线人数",
            type: "line",
            data: data2,
          },
        ],
      };
      app.count = 11;
      setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, "");
        data.shift();
        var num = Math.round(Math.random() * 50);
        data.push(num);
        data2.shift();
        data2.push(50 - num);
        categories.shift();
        categories.push(axisData);
        categories2.shift();
        categories2.push(app.count++);
        myChart.setOption({
          xAxis: [
            {
              data: categories,
            },
            {
              data: categories2,
            },
          ],
          series: [
            {
              data: data,
            },
            {
              data: data2,
            },
          ],
        });
      }, 2100);

      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
#son {
  width: 100%;
  height: 60%;
}
#app1 {
  height: 100%;
  width: 100%;
}
</style>
